<template>
  
  <el-card shadow="hover" style="margin-top: 20px;height: 600px;">
    <el-form inline class="abc" >
      <el-form-item>
        <el-input class="inpit" :prefix-icon="Search" />
      </el-form-item>
      <el-button type="primary" :icon="Search">查询</el-button>

      <span style="margin-left:20px">资源类型：</span>
      <el-cascader style="margin-left:10px" :options="options" clearable />

      <span style="margin-left:20px">状态：</span>
      <el-cascader style="margin-left:10px" :options="ztoptions" clearable />
      
    </el-form>
    <el-table style="width: 100%;">
    <el-table-column align="center"  label="内容" width="250" />
    <el-table-column align="center" label="发布时间" width="180" />
    <el-table-column align="center" label="数据" width="180" />
    <el-table-column align="center" label="状态" width="180" />
    <el-table-column align="center" label="操作" width="180" />
  </el-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Dynamics",
});
</script>

<script setup lang="ts">
    import { Search, Edit, UserFilled, Delete} from '@element-plus/icons-vue'
    const options=[
        {    
            label: '全部资源',
        },
        {    
            label: '作品',
        },
        {    
            label: '教程',
        },
        {    
            label: '动态',
        },
        {    
            label: '专题',
        },
    ]
    const ztoptions=[
        {    
            label: '全部',
        },
        {    
            label: '已发布',
        },
        {    
            label: '未发布',
        },
        {    
            label: '审核中',
        },
        {    
            label: '审核未通过',
        },
        {    
            label: '仅主页可见',
        },
    ]
</script>

<style scoped>
    .inpit{
        width: 200px;
        margin-top:18px
        /* vertical-align: middle; */
    }
    .abc{
        text-align: left;
    }
</style>
